<template>
	<view id="map">
		<AScroller :status="status" :empty="empty" @load="getMachineList" :auto="true">
			<ABanner />
			<!-- <ASearch @submit="handleSubmit" :value='query.machineName'></ASearch> -->
			<!-- 地图 -->
			<view class="map">
				<map @labeltap="handleClickLabel" @regionchange="handleRegionChange" style="width: 100%;height: 500rpx;"
					:markers="markers" :show-location="true" :latitude="location.latitude"
					:longitude="location.longitude">
				</map>
				<span @click="handleClickFont" class="iconfont icon-ditu"></span>
			</view>
			<!-- 机器列表 -->
			<ATabs class="tabs" :tabs="['附近']"></ATabs>
			<view class="machineList">
				<AMachine @click="handleTouchend(item)" :key="index" class="machine-item" :machine='item'
					v-for="(item,index) in machineList" />
			</view>
		</AScroller>
	</view>
</template>

<script>
	import {
		getMachineListByLocation
	} from '@/api/map.js'
	import '@/static/iconfont/iconfont.css'
	export default {
		data() {
			return {
				machineList: [],
				status: "0",
				empty: 0,
				location: {
					latitude: '',
					longitude: ''
				},
				query: {
					pageSize: 5,
					pageNum: 1,
					machineName: ""
				},
				// 自身位置
				myLocation: {

				},
				markers: []
			}
		},
		components: {

		},
		methods: {
			init() {
				let that = this
				// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				uni.getSetting({
					success(res) {
						// 如果没有授权
						if (!res.authSetting['scope.userLocation']) {
							// 则拉起授权窗口
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									uni.getLocation({
										type: 'wgs84',
										success: function(res) {
											console.log(res)
											that.location.latitude = res.latitude - 0.0027
											that.location.longitude = res.longitude + 0.0039
											that.myLocation = that.location
										}
									})
								}
							})
						} else {
							// 有权限则直接获取
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									that.location.latitude = res.latitude - 0.0027
									that.location.longitude = res.longitude + 0.0039
									that.myLocation = that.location
								}
							})
						}
					}
				})
			},
			getMachineList() {
				getMachineListByLocation({
					longitude: 120.575026,
					latitude: 29.994827,
					...this.query
				}).then(res => {
					this.machineList.push(...res.data.list.map(item => {
						return {
							...item,
							distance: (item.distance + "").slice(0, 4)
						}
					}))
					this.markers.push(...res.data.list.map(item => {
						let length = item.name.split("").length
						return {
							id: item.mid,
							longitude: item.lon,
							latitude: item.lat,
							iconPath: '',
							label: {
								content: item.name,
								color: '#000',
								fontSize: 12,
								// anchorX: -15 * length / 2,
								anchorX: -6 * length - 5,
								anchorY: -70,
								bgColor: '#fff',
								borderRadius: 10,
								padding: 6
							},
							width: '30',
							height: '45'
						}
					}))
					this.empty = !res.data.total
					this.status = this.machineList.length >= res.data.total ? 3 : 2;
					this.query.pageNum++
				})
			},
			// 定位机器位置
			handleTouchend(e) {
				this.$store.dispatch('setMachine', e)
				// this.$bus.$emit('machineChanges', e)
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/tabBar/shop'
					})
				}, 100)
			},
			// 定位自身的位置
			handleClickFont() {
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							uni.openSetting({
								success(res) {
									if (res.authSetting['scope.userLocation']) {
										uni.getLocation({
											type: 'wgs84',
											success: function(res) {
												console.log(res)
												this.location.latitude = res.latitude
												this.location.longitude = res.longitude
												this.myLocation = this.location
											}
										})
									}
								}
							})
						}
					}
				})
				this.location = this.myLocation
			},
			handleRegionChange() {
				this.location = {}
			},
			handleClickLabel(e) {},
			handleSubmit(value) {
				this.query.pageNum = 1
				this.machineList = []
				this.query.machineName = value
				this.getMachineList()
			}
		},
		onLoad() {
			this.init()
		}
	}
</script>

<style scoped lang="scss">
	#map {
		width: 100%;
		height: 100vh;

		.tabs /deep/ .content .container_item ul {
			padding-left: 30rpx;
			justify-content: left;
			font-weight: 800;

			.active_line {
				color: #fb6853;
			}
		}

		.map {
			margin-top: -40rpx;
			position: relative;

			.iconfont {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				font-size: 46rpx;
				background-color: #fff;
				border-radius: 50%;
				padding: 10rpx;
			}
		}

		.machine .machine-item:hover {
			background-color: #c9cace;
		}
	}
</style>